<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子发票管理</title>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
	$(function(){
		$("#all_dzfp").datagrid({
			idField:'id',
			title:'电子发票',
			fitColumns:true,
			width:'100%',
			striped:true,
			loadMsg:'数据正在加载中....',
			rownumber:true,
			url:'list',
			columns:[
				[
					{
						field:'id',
						title:'序号',
						width:50,
						align:'center'
					},{
						field:'serial',
						title:'发票编号',
						width:100,
						align:'center'
					},{
						field:'lessee',
						title:'开票单位',
						width:100,
						align:'center',
						formatter:function(value){
							return value.name;
						}
					},{
						field:'number',
						title:'发票号码',
						width:100,
						align:'center'
					},{
						field:'code',
						title:'发票代码',
						width:100,
						align:'center'
					},{
						field:'money',
						title:'缴费金额',
						width:100,
						align:'center'
					},{
						field:'date',
						title:'开票日期',
						width:100,
						align:'center'
					},{
						field:'name',
						title:'报销人',
						width:100,
						align:'center'
					},{
						field:'endDate',
						title:'报销时间',
						width:100,
						align:'center'
					}
				]
			],
			pagination:true,
			pageSize:5,
			pageList:[5,10,20,25,50 ],
				toolbar: [
					{
						text:'新增发票',
						iconCls:'icon-add',
						handler: function(){
							$('#mydialog').dialog({
								title:'新增'
							});
						$('#myform').get(0).reset();
						//$('#myform input').val("");
						$('#mydialog').dialog('open');
						}
					}
				]	
			});
		//关闭窗口按钮
		$("#btn2").click(function(){
			$("#mydialog").dialog('close');
		});
		//提交表单
		$('#btn1').click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type:'post',
					url:'saveDzfp',
					cache:false,
					data:$('#myform').serialize(),
					success:function(data){
						
						//关闭窗口
						$("#mydialog").dialog('close');
						//reload刷新datagrid表格
						$('#all_dzfp').datagrid('reload');
						//提示信息
						$.messager.show({
							title: '提示信息',
							msg: '操作成功！'
						});
					}
				});
			}else{
				$.messager.show({
					title: '提示信息',
					msg: '数据验证不通过，不能保存'
				});	
			}
		});
		
		//form校验	
		$('#money').numberbox({
			required:true,
			missingMessage:'必填',
			precision:1
		});
		$("#datekp,#datebx").datebox({
			editable:false,
			required:true,
			missingMessage:'必填',
			
		});
		//查询
		$('#searchbtn').click(function(){
			$('#all_dzfp').datagrid('load', serializeForm($('#mysearch').form()));
		});
		//清除查询
		$('#clearbtn').click(function(){
			$('#mysearch').form('clear');
			$("#all_dzfp").datagrid('load', {});
		});
	});
	//js方法，序列化表单
	function serializeForm(form){
		var obj = {};
		$('#id').val("1");
		$.each(form.serializeArray(), function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
	
	</script>
	<style type="text/css">
		tr{
			height: 30px;
		}
		#ss{
			margin: 20px;
		}
	</style>
</head>
<body>
	<div id="ss"> 
		<form id="mysearch" method="post">
			<input type="hidden" name = "id" id="id">
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">发票编号</span>
					<input type="text" class="form-control" name="serial" placeholder="发票编号">
				</div>
			</div>
			 <div class="col-md-3">
				<div class="input-group">
					<span class="input-group-addon">报销人</span>
					<input type="text" class="form-control" name="name" placeholder="姓名">
				</div> 
			</div>
			<div class="btn-group">
			<button id="searchbtn" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> 查询</button>
				<button id="clearbtn" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 清空</button>
			
			</div>
		</form>
	</div>

<table id="all_dzfp"></table>
<div id="mydialog" modal=true  draggable=false class="easyui-dialog" closed=true > 
	<form id="myform">
		<table  width="300px;" style="padding-bottom: 10px;">
			<tr>
			<input type="hidden" name = "id">
			</tr>
			<tr>
				<td>开票单位：</td>
				<td>
					<select name="less" style="width: 60%;">
						<option  th:each="z:${zhs}" th:value="${z.id}" th:text="${z.name }"></option>
					</select> 
				</td>
			</tr>
			<tr>
				<td>发票号码:</td>
				<td><input type="text" name="number" id="number" required="true"></td>
			</tr>
			<tr>
				<td>发票编号：</td>
				<td><input type="text" name="serial" id="serial"required="true"></td>
			</tr>
			<tr>
				<td>发票代码：</td>
				<td><input type="text" name="code" id="code" required="true"></td>
			</tr>
			<tr>
				<td>开票日期：</td>
				<td><input type="text" name="date" id="datekp" ></td>
			</tr>
			<tr>
				<td>金额：</td>
				<td><input type="text" name="money" id="money"></td>
			</tr>
			<tr>
				<td>报销人：</td>
				<td><input type="text" name="name" id="name" required="true"></td>
			</tr>
			<tr>
				<td>报销时间：</td>
				<td><input type="text" name="endDate" id="datebx"></td>
			</tr>
			<td colspan="2" align="center">
					<a id="btn1" class="easyui-linkbutton">提交</a>
					<a id="btn2" class="easyui-linkbutton">关闭</a>
			</td>
		</table>
	</form>
</div>

</body>
</html>